{% extends 'layout/basic.html' %}

{% block title %}
    用户短信登录
{% endblock %}


{% block css %}
    {% load static %}
    <link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}


{% block content %}
    <div class="account">
        <div class="title">用户登录</div>


        <form action="" style="width: 320px; margin: auto" id="regForm">
            {% csrf_token %}
            {% for i in form %}
                {% if i.label == '验证码' %}
                    <div class="form-group">
                        <label for="{{ i.id_for_label }}">
                            {{ i.label }}:
                        </label>
                        <div class="clearfix">
                            <div class="col-md-6"
                                 style="padding-left: 0">{{ i }}<span></span>
                            </div>
                            <div class="col-md-6 "><input type="button"
                                                          class="btn btn-default"
                                                          id="b1"
                                                          value="点击获取验证码"></div>
                        </div>
                    </div>
                {% else %}
                    <div class="form-group">
                        <label for="{{ i.id_for_label }}">
                            {{ i.label }}:
                        </label>
                        {{ i }} <span></span>
                    </div>
                {% endif %}

            {% endfor %}
             <div class="checkbox">
                <div style="float: right">
                    <a href="{% url 'login'%}">账号密码登陆?</a>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-3">
                    <button type="button" class="btn btn-primary" id="b2" style="text-decoration: none">登 录
                    </button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}

{% block js %}
    <script>
        var t = 60;
        $(function () {
            $('#b1').click(function () {
                var mobile_phone = $('#id_mobile_phone').val();
                $.ajax({
                    url: '/send_sms/', //  /send_sms/
                    type: 'get',
                    data: {
                        {#csrfmiddlewaretoken: $('[name="csrfmiddlewaretoken"]').val(),#}
                        'mobile_phone': mobile_phone,
                        'tpl': 'login'
                    },
                    success: function (data) {
                        if (data.status == true && t == 60) {

                            $('#b1').attr('disabled', 'disabled');
                            var timer = setInterval(function () {
                                if (t == 0) {
                                    clearInterval(timer);
                                    $('#b1').removeAttr('disabled');
                                    $('#b1').val('重新发送');

                                    t = 60
                                } else {
                                    $('#b1').val(t + '秒后发送');
                                    t--;
                                }
                            }, 1000)
                        } else {
                            $('#regForm span').html('');
                            for (var i in data.error) {
                                $('[name=' + i + ']').next().attr('style', 'color:red;').html(data.error[i])
                            }
                        }
                    }
                })
            });
            $('#b2').click(function () {
                $.ajax({
                    url: '/login_sms/',
                    type: 'post',
                    data: $('#regForm').serialize(),
                    success: function (data) {
                        if (data.status == true) {
                            location.href = data.data
                        } else {

                            $('#regForm span').html('');
                            for (var i in data.error) {
                                // $('[name='+i+']').val(aa[i])
                                $('[name=' + i + ']').next().attr('style', 'color:red;').html(data.error[i])
                            }
                        }
                    }
                })


            })

        })
    </script>
{% endblock %}